<template>
  <div class="my-info-container">
    <!-- 返回按钮 -->
    <div class="my-header-back">
      <span @click="goBack">
        <i class="iconfont">&#xe603;</i>
      </span>
    </div>
    <!-- 背景图 -->
    <img src="../../assets/images/my-bg.jpg" alt="" class="backgroundUrl" />

    <!-- 用户头像部分 -->
    <!-- 登录和未登录展示不同部分 -->
    <div class="my-info-content">
      <div class="my-avatar">
        <img :src="avatar" />
      </div>
      <div class="my-info-detail">
        <div class="my-userName">{{ nickName }}</div>
        <div class="my-summary">
          <span>{{ credit }}</span>
          <span>信用分</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import { useStore } from "vuex";
import { reactive, toRefs } from "@vue/reactivity";
import { onMounted } from "vue";
export default {
  props: {
    nickName: {
      type: String,
    },
    avatar: {
      type: String,
    },
    credit: {
      type: Number,
    },
  },
  setup(props) {
    const route = useRouter();
    const store = useStore();
    // onMounted(() => {
    //   store.commit("reviseLogin", {
    //     status: window.localStorage.getItem("isLogin"),
    //   });
    //  state.isLogin = store.state.isLogin
    // });
    const state = reactive({
      isLogin: null,
      nickName: props.nickName,
      avatar: props.avatar,
      credit: props.credit,
    });
    const goBack = () => {
      route.go(-1);
    };

    const toLogin = () => {
      route.push("/qunar/login");
    };
    return {
      ...toRefs(state),
      goBack,
      toLogin,
    };
  },
};
</script>
<style scoped>
.my-info-container {
  position: relative;
  height: 6.8267rem;
}
.my-header-back {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;
  padding: 0.3413rem 0 0.2133rem 0.4267rem;
}
.my-header-back span .iconfont {
  font-size: 1.0667rem;
  color: white;
}
.backgroundUrl {
  width: 100%;
  height: 6.8267rem;
}
.my-info-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.64rem;
  display: flex;
  width: 100%;
  padding-left: 0.64rem;
}
.my-info-unLogin {
  position: absolute;
  left: 50%;
  right: 0;
  bottom: 0.64rem;
  /* display: flex; */
  /* width: 100%; */
  /* padding-left: .64rem; */
  transform: translateX(-50%);
  text-align: center;
  color: white;
  font-size: 0.5547rem;
}
.my-info-unLogin .my-avatar {
  margin: 0 auto;
}
.my-avatar {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(253, 245, 245, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.my-avatar img {
  border-radius: 50%;
  width: 2.9867rem;
  height: 2.9867rem;
}
.my-info-detail {
  padding-left: 0.4267rem;
  color: white;
}
.my-userName {
  padding: 0.2133rem;
}
.my-summary {
  padding: 0.2133rem;
}
.my-summary span:nth-child(1) {
  display: block;
}
.my-summary span:nth-child(2) {
  display: block;
  font-size: 0.4267rem;
  transform: scale(0.75);
  margin-left: -0.5547rem;
}
</style>
